<template>
	<div class="daihuoshipin">
		<div class="daren1">
			<div class="waicengqu">
				<div class="shouye_tou2">
					<span>带货视频趋势</span>
				</div>
				<div class="bianhua">
					<div class="bianhua1">
						<ul>
							<li>近7天</li>
							<li>近30天</li>
						</ul>
					</div>
					<div class="shijian">
						<el-date-picker
						      v-model="value2"
						      type="daterange"
						      align="right"
						      unlink-panels
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
						      :picker-options="pickerOptions">
						    </el-date-picker>
					</div>
					<div class="bianhua2">
						<ul>
							<li>总量</li>
							<li>增量</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="meiyou">
				<img src="../../../assets/img/404.png" />
				<span>暂无抖音号</span>
			</div>
		</div>
		
		<div class="meiri">
			<div class="meirilie">
				<span>带货达人列表</span>
			</div>
			
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>带货视频</th>
						<th>带货达人</th>
						<th @click="qiehuan">
							<div class="shangxia1">粉丝量</div>
							<div class="shangxia2">
								<i class="el-icon-caret-top" :class="{'bianse':huan==1}"></i>
								<i class="el-icon-caret-bottom" :class="{'bianse':huan==2}"></i>
							</div>
						</th>
						<th @click="qiehuan1">
							<div class="shangxia1">点赞量</div>
							<div class="shangxia2">
								<i class="el-icon-caret-top" :class="{'bianse':huan1==1}"></i>
								<i class="el-icon-caret-bottom" :class="{'bianse':huan1==2}"></i>
							</div>
						</th>
						<th @click="qiehuan2">
							<div class="shangxia1">评论量</div>
							<div class="shangxia2">
								<i class="el-icon-caret-top" :class="{'bianse':huan2==1}"></i>
								<i class="el-icon-caret-bottom" :class="{'bianse':huan2==2}"></i>
							</div>
						</th>
						<th @click="qiehuan3">
							<div class="shangxia1">发布时间</div>
							<div class="shangxia2">
								<i class="el-icon-caret-top" :class="{'bianse':huan3==1}"></i>
								<i class="el-icon-caret-bottom" :class="{'bianse':huan3==2}"></i>
							</div>
						</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in 5" :key="index">
						<td>
							<div>
								<img src="../../../assets/img/xiangqing.png" />
								<span>我们的很浓厚生活！早知道结婚我们的很浓厚生活！早知道结婚这...</span>
							</div>
						</td>
						<td>
							<div>
								<img src="../../../assets/img/datou.png" />
								<span>牛奶奶昔</span>
							</div>
						</td>
						<td>{{shu | guolv}}</td>
						<td>{{shu | guolv}}</td>
						<td>{{shu | guolv}}</td>
						<td>2020-10-30 14:00:56</td>
					</tr>
				</tbody>
			</table>
			
			<div class="fenye" style="text-align: center;margin-top:0.5rem ;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
			
			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				shu:564151,
				//日期选择器
				 pickerOptions: {
				  shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近一个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					  picker.$emit('pick', [start, end]);
					}
				  }, {
					text: '最近三个月',
					onClick(picker) {
					  const end = new Date();
					  const start = new Date();
					  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					  picker.$emit('pick', [start, end]);
					}
				  }]
				},
				value1: '',
				value2: '',
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				qie:0,
				huan:0,
				
				qie1:0,
				huan1:0,
				
				qie2:0,
				huan2:0,
				
				qie3:0,
				huan3:0,
			}
		},
		mounted(){
			$(".bianhua1 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
			
			$(".bianhua2 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
			  if(shuzi>0){
				var wan=parseInt(shuzi).toString();
				var qumo=wan%10000;
				//粉丝数改变
				if(wan.length<5){
					shuzi=wan;
				}else if(wan.length>4 && wan.length<=8){
					let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
					shuzi=fen_si;
				}else if(wan.length>8){
					let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
					shuzi=fen_si;
				}
			  }
			  return shuzi
			}
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			//粉丝量
			qiehuan(){
				if(this.qie==0){
					this.huan=1;
					this.qie+=1;
				}else if(this.qie==1){
					this.huan=2;
					this.qie=3;
				}else if(this.qie==3){
					this.huan=0;
					this.qie=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
			},
			//点赞量
			qiehuan1(){
				if(this.qie1==0){
					this.huan1=1;
					this.qie1+=1;
				}else if(this.qie1==1){
					this.huan1=2;
					this.qie1=3;
				}else if(this.qie1==3){
					this.huan1=0;
					this.qie1=0;
				}
				
				this.qie=0;
				this.huan=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie3=0;
				this.huan3=0;
				
			},
			//评论量
			qiehuan2(){
				if(this.qie2==0){
					this.huan2=1;
					this.qie2+=1;
				}else if(this.qie2==1){
					this.huan2=2;
					this.qie2=3;
				}else if(this.qie2==3){
					this.huan2=0;
					this.qie2=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie=0;
				this.huan=0;
				
				this.qie3=0;
				this.huan3=0;
			},
			//发布时间
			qiehuan3(){
				if(this.qie3==0){
					this.huan3=1;
					this.qie3+=1;
				}else if(this.qie3==1){
					this.huan3=2;
					this.qie3=3;
				}else if(this.qie3==3){
					this.huan3=0;
					this.qie3=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
				
				this.qie=0;
				this.huan=0;
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.daihuoshipin{
		
		.daren1{
			background-color: #fff;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.waicengqu{
				margin-bottom:0.8rem ;
				.shouye_tou2{
					height: 100%;
					float: left;
					box-sizing: border-box;
					position: relative;
					margin-bottom:0.8rem ;
					
					span{
						font-size: 0.45rem;
						display: inline-block;
						margin-left:0.6rem ;
						margin-top:0.7rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.6rem;
						left: 0;
						width: 0.2rem;
						height: 0.8rem;
						background-color: #1890FF;
					}
				}
				.bianhua{
					float: right;
					display: flex;
					align-items: center;
					padding-top:0.6rem ;
					
					.bianhua1{
						margin-right:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.shijian{
						height: 1rem;
						margin-top:-0.9rem ;
					}
					.bianhua2{
						margin-left:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
							
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			.waicengqu::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.meiyou{
				text-align: center;
				padding: 3rem 0;
				img{
					width: 6rem;
				}
				span{
					display: block;
					padding-top:1rem ;
					color: #999999;
					font-size: 0.4rem;
				}
			}
		}
		
		.meiri{
			margin-top:1rem ;
			
			.meirilie{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				margin-bottom:0.8rem ;
				
				span{
					font-size: 0.45rem;
					display: inline-block;
					margin-left:0.6rem ;
					margin-top:0.7rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.2rem;
					height: 0.8rem;
					background-color: #1890FF;
				}
			}
			
			table{
				width: 100%;
				
				tr:hover td{
					background-color: #E5F4FF;
				}
				th{
					color: #333333;
					font-size: 0.45rem;
					padding: 0 0 0.6rem 0;
					font-weight: normal;
					
					width: 4rem;
					cursor: pointer;
					box-sizing: border-box;
					.shangxia1{
						float: left;
					}
					.shangxia2{
						float: left;
						box-sizing: border-box;
						margin-left:0.2rem ;
						font-size: 0.4rem;
						margin-top:0.02rem ;
						color: #999999;
						
						i{
							display: block;
						}
						i:nth-of-type(2){
							margin-top:-0.2rem ;
						}
						.bianse{
							color:#1890FF ;
						}
					}
				}
				th:nth-of-type(1){
					text-align: left;
					width: 10rem;
				}
				th:nth-of-type(2){
					text-align: left;
					width: 4rem;
				}
				td{
					color: #666666;
					font-size: 0.4rem;
					padding: 0.4rem 0;
					text-align: center;
				}
				td:nth-of-type(1){
					div{
						display: flex;
						align-items: center;
						img{
							width: 3rem;
						}
						span{
							width: 5.5rem;
							color: #333333;
							font-size: 0.4rem;
							margin-left:0.3rem ;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
				}
				td:nth-of-type(2){
					div{
						display: flex;
						align-items: center;
						img{
							width: 0.9rem;
							height: 0.9rem;
							border: 50%;
						}
						span{
							color: #333333;
							font-size: 0.4rem;
							margin-left:0.3rem ;
							
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box; 
							-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
							-webkit-box-orient: vertical;
						}
					}
				}
				th:nth-of-type(4){
					width: 4rem;
					color: #000000;
					cursor: pointer;
					padding-left:0.8rem ;
					box-sizing: border-box;
					.shangxia1{
						float: left;
					}
					.shangxia2{
						float: left;
						box-sizing: border-box;
						margin-left:0.2rem ;
						font-size: 0.4rem;
						margin-top:0.02rem ;
						color: #999999;
						
						i{
							display: block;
						}
						i:nth-of-type(2){
							margin-top:-0.2rem ;
						}
						.bianse{
							color:#1890FF ;
						}
					}
				}
				td:nth-of-type(4){
					color: #000000;
				}
				th:nth-of-type(3){
					padding-left:0.8rem ;
				}
				th:nth-of-type(5){
					padding-left:0.8rem ;
				}
				th:nth-of-type(6){
					padding-left:0.8rem ;
				}
			}
		}
	}
</style>
